import React, { useEffect, useState } from "react"
import "./style.less"
import {
  getListAPI,
  getInfoAPI,
  getVisitAPI,
  getCategoryAPI,
  getTagAPI,
} from "@/apis/index"
import { NotificationOutlined, CloseOutlined } from "@ant-design/icons"
import { Button, Pagination } from "antd"
import Plate from "@/components/Plate"
import PersonalInfo from "@/components/PersonalInformation"
import Classification from "@/components/Classification"
import Label from "@/components/Label"

export default function Home() {
  // 公告开关
  const [showTip, setShowTip] = useState(true)
  // list
  const [list, setList] = useState([])
  // 当前页数
  const [current, setCurrent] = useState(1)
  // 每页条数
  const [pageSize, setPageSize] = useState(10)
  // 数据总数
  const [total, setTotal] = useState(0)
  // 个人信息
  const [info, setInfo] = useState({})
  // 访问量
  const [visitNum, setVisitNum] = useState({})
  // 分类
  const [category, setCategory] = useState([])
  // 标签
  const [tag, setTag] = useState([])

  // 换页处理
  const handlePageChange = async (page, pageSize) => {
    setCurrent(page)
    setPageSize(pageSize)
    await getList()
  }

  const getList = async () => {
    let params = {
      current: current,
      size: pageSize,
    }
    const resp = await getListAPI(params)
    setList(resp.data.data)
    setTotal(resp.data.total)
    setPageSize(resp.data.size)
  }

  const getInfo = async () => {
    const resp = await getInfoAPI()
    setInfo(resp.data.data)
  }

  const getVisit = async () => {
    const resp = await getVisitAPI()
    setVisitNum(resp.data.data)
  }

  const getCategory = async () => {
    const resp = await getCategoryAPI()
    setCategory(resp.data.data)
  }

  const getTag = async () => {
    const resp = await getTagAPI()
    setTag(resp.data.data)
  }

  const element = document.querySelector(".content-right")

  window.addEventListener("scroll", function () {
    let scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      0
    if (scrollTop <= 15) {
      element?.classList.remove("fixed")
    } else if (scrollTop > 15 && scrollTop < 612) {
      element?.classList.add("fixed")
      element?.classList.remove("relative")
    } else if (scrollTop >= 612) {
      element?.classList.add("relative")
    }
  })

  useEffect(() => {
    getList()
    getInfo()
    getVisit()
    getCategory()
    getTag()
  }, [])
  return (
    <div className={"layout-content "}>
      <div className="content-left">
        {showTip && (
          <div className="tip">
            <NotificationOutlined />
            <div>
              公告 : <b>新项目:</b>
              <a
                href="https://www.quanxiaoha.com/column/10247.html"
                target="_blank"
              >
                仿小红书
              </a>
              （微服务架构）正在更新中... 。博客项目 2 期已经完结
              🎉🎉🎉，目前星球内部
              <a href="https://www.quanxiaoha.com/column/" target="_blank">
                专栏
              </a>
              已更新 80w+ 字，讲解图 3365+， 欢迎
              <a href="https://www.quanxiaoha.com/column/" target="_blank">
                点击试读
              </a>
              ，单体项目和微服务项目都能学习 ！
            </div>
            <Button type="text" onClick={() => setShowTip(false)}>
              <CloseOutlined />
            </Button>
          </div>
        )}
        <div className="content-plate">
          {list.length > 0 &&
            list.map((item, index) => (
              <Plate
                list={item}
                key={item.id}
                top={index < 3 ? true : false}
                id={item.id}
              />
            ))}
        </div>
        <div className="pagination">
          <span className="total">共 {total} 篇文章</span>
          <Pagination
            defaultCurrent={1}
            total={total}
            current={current}
            pageSize={pageSize}
            onChange={(page, pageSize) => {
              handlePageChange(page, pageSize)
            }}
          />
        </div>
      </div>
      <div className="content-right">
        <PersonalInfo info={info} visitNum={visitNum} />
        <Classification category={category} />
        <Label tag={tag} />
      </div>
    </div>
  )
}
